<template>
    <panel title="公司信息" class="panel" :class="[cname]">
        <ul class="content">
            <li><img src="https://img12.360buyimg.com/jrpmobile/jfs/t25603/15/1053175366/15557/ab0e663d/5b874874N4c490fc5.png?width=750&height=200" alt=""></li>
            <li>
                <div>
                    <img src="//img12.360buyimg.com/jrpmobile/jfs/t3991/64/2521945388/12110/93c0139/58d1e462Ncf294123.png?width=132&height=132" alt="">
                    <p>优惠券</p>
                </div>
                <div>
                    <img src="//img12.360buyimg.com/jrpmobile/jfs/t3991/64/2521945388/12110/93c0139/58d1e462Ncf294123.png?width=132&height=132" alt="">
                    <p>优惠券</p>
                </div>
                <div>
                    <img src="//img12.360buyimg.com/jrpmobile/jfs/t3991/64/2521945388/12110/93c0139/58d1e462Ncf294123.png?width=132&height=132" alt="">
                    <p>优惠券</p>
                </div>
            </li>
            <li>Copyright © 2004-2018 京东JD.com 版权所有</li>
            <li>投资有风险，购买需谨慎</li>
            <li>京东金融平台服务协议</li>
            <li>京东金融隐私政策</li>
        </ul>
    </panel>
</template>
<script>
import Panel from "@/components/panel"
export default {
    name: 'Footer',
    props: {
        cname: {
            type: String,
            default: ''
        }
    },
    components: {
        Panel
    }
}
</script>
<style lang="scss" scoped>
    @import '~assets/scss/element.scss';
    .panel{
        @include panel;
        /deep/ h4.one{ // /deep/解决父子件改变子组件的样式方式
            display: none;
        }
        .content{
            @include flex; // 纵向的不用传参，横向的话就这样写 flex(row)
            margin-bottom: 1rem;
            background: #F5F5F5;
            li{
                width: 100%;
                text-align: center;
                font-size: .24rem;
                color: #666;
                >img{
                    width: 100%;
                    height: 1.43rem;
                }
                &:nth-child(2){
                    @include flex(row);
                    height: 1.86rem;
                    box-sizing: border-box;
                    >div{
                        width: 33.3333%;
                        text-align: center;
                        box-sizing: border-box;
                        padding-top: .2rem;
                        img{
                            width: .9rem;
                            height: .9rem;
                        }
                        p{
                            font-size: .26rem;
                            color: #666;
                            margin-top: .12rem;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                        }
                    }
                }
                &:nth-child(n+3){ // 从三开启
                    padding: .24rem 0;
                    height: .38rem;
                    line-height: .38rem;
                    border-top: 1px solid #ddd;
                }
            }
        }
    }
</style>


